<template>
	<view class="wenjuan">
		<headertop title="问卷" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<image :src="_static('/images/headimgtit.png')" mode="" class="wenjuanback">
		</image>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>

		<view class="" style="height: 268rpx;overflow: hidden;">
			<view class="ttbt">
				{{titlestr}}
			</view>
		</view>

		<view class="bottombox">
			<view class="cebnter">
				<view class="msgicon" v-if="!list.length">
					<image :src="_static('/images/wxnone.png')" mode="widthFix">
					</image>
					<view class="msgtext">
						暂无内容
					</view>
				</view>
				<view class="xuanzeti" style="margin-bottom: 28rpx;" v-for="item in list" :key="item.id"
					v-if="list.length">
					<view class="timu">
						{{item['title']}}
					</view>
					<view class="xuanxiangboxs">
						<view class="cnter" v-if="item.question_type=='radio'||item.question_type=='checkbox'">
							<view class="line" v-for="(ite,ind) in item.optionjson" :key="ind"
								@click="xuanze(item,ite)">
								<view class="reduce">
									<view class="cc" v-if="ite==item.reply||boolfun(item.replys,ite)">

									</view>
								</view>
								<view class="xxbox">{{ite}}</view>
							</view>
						</view>
						<view class="cnter" v-if="item.question_type=='input'">
							<view class="line" style="border: none;">
								<input type="text" v-model="item.reply" placeholder="请输入" />
							</view>
						</view>
						<view class="cnter" v-if="item.question_type=='slider'">
							<slider activeColor="#2ab4f5" max="10" @change="sliderChange($event,item)" show-value />
						</view>
						<view class="cnter" v-if="item.question_type=='time'||item.question_type=='select'"
							@click="open(item)">
							<view class="line" style="justify-content: space-between;border: none;">
								<input type="text" v-model="item.reply" :disabled="true" placeholder="请选择" />
								<image :src="_static('/images/Frjt.png')" class="rightarrow" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="bottom">
			<view class="xuanxiang">
				<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show=false">
					取消
				</view>
				<view class="tt" style="font-weight: 600;">
					请选择
				</view>
				<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
					确认
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="valuedate"
				@change="bindChange" class="picker-view" v-if="typestr=='time'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="value1" @change="bindChange"
				class="picker-view" v-else>
				<picker-view-column>
					<view class="item" v-for="(item,index) in arr" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</up-popup>
		<view class="" style="height: 194rpx;">

		</view>
		<view class="fixedbox" v-if="list.length">
			<view class="btn" @click="tj1">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import headertop from '@/components/header.vue'
	const indicatorStyle = ref(`height: 50px;`)
	import {
		_static
	} from '@/ulm/utils/url.js'
	const date = new Date()
	const value1 = ref(0)
	const years = []
	const typestr = ref('')
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const day = date.getDate()
	for (let i = 1900; i <= date.getFullYear() + 60; i++) {
		years.push(i)
	}
	var inddd = years.findIndex(item => item == year)
	const valuedate = ref([inddd, month - 1, day - 1])
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}
	const arr = ref([])
	const statusBarHeight = ref('')
	const show = ref(false)
	const barHeight = ref('')
	const back1 = ref('')
	const list = ref([])
	const selecreply = ref('')
	const survey_id = ref('')
	const timereply = ref('')
	const iditem = ref(0)
	const titlestr = ref('')
	const typestr1 = ref('')
	onLoad((opt) => {
		typestr1.value = opt['typestr']
		inittimu(opt.id)
		titlestr.value = opt.titlestr
	})

	function open(item) {
		typestr.value = item.question_type
		show.value = true
		arr.value = item.optionjson
		console.log(arr, 'arr--------');
		iditem.value = item.id
	}

	function tj1() {
		for (var i in list.value) {
			if (list.value[i]['question_type'] == 'checkbox') {
				list.value[i]['reply'] = list.value[i]['replys'].join()
			}
			if (list.value[i]['question_type'] != 'select') {
				if (!list.value[i]['reply']) {
					uni.showToast({
						title: '请补全答案在提交',
						icon: 'none'
					})
					return
				}
			}
		}
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要提交吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {

					tj()
					// 执行确定后的逻辑
				} else if (res.cancel) {
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {
				console.error('弹窗调用失败', err);
			}
		});
	}
	async function tj() {

		var array = []

		for (var i in list.value) {
			var obj = {
				id: list.value[i]['id'],
				reply: list.value[i]['reply']
			}
			array.push(obj)
		}
		var obj1 = {
			'survey_id': list.value[0]['survey_id'],
			'question': array
		}
		if (typestr1.value == '最新问卷') {
			obj1.survey_id = survey_id.value
		}
		if (typestr1.value == '最新问卷') {
			const res1 = await $api.submit(
				obj1
			)
			if (res1.code == 1) {
				uni.navigateBack()
				setTimeout(() => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
				}, 500)
			} else {
				uni.showToast({
					title: res1.msg,
					icon: 'none'
				})
			}
			return
		}

		const res = await $api.surveysubmit(obj1)
		if (res.code == 1) {
			uni.navigateBack()
			setTimeout(() => {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
			}, 500)
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function boolfun(arr1, ite) {
		if (!arr1) {
			arr1 = []
		}
		var ind = arr1.findIndex(item => item === ite)
		if (ind == -1) {
			return false
		} else {
			return true
		}
	}

	function xuanze(item, ite) {
		console.log('xuanze----------------------');
		if (item.question_type == 'radio') {
			item.reply = ite
		} else {
			var ind = item.replys.findIndex(it => it == ite)
			if (ind == -1) {
				item.replys.push(ite)
			} else {
				item.replys.splice(ind, 1)
			}
		}
	}

	function bindChange(e) {
		const val = e.detail.value
		var ind = list.value.findIndex(item => item.id == iditem.value)
		if (typestr.value == 'time') {
			timereply.value =
				`${years[val[0]]}-${months[val[1]]<10?'0'+months[val[1]]:months[val[1]]}-${days[val[2]]<10?'0'+days[val[2]]:days[val[2]]}`
		} else {
			selecreply.value = arr.value[val[0]]
		}

	}

	function convertToTimestamp(dateStr) {
		return new Date(dateStr).getTime();
	}

	function queding() {
		var ind = list.value.findIndex(item => item.id == iditem.value)
		console.log(ind, 'indindindind');
		console.log(list.value, 'list.valuelist.value');
		console.log(list.value[ind]['reply']);
		if (typestr.value == 'time') {
			if (!timereply.value) {
				list.value[ind]['reply'] =
					`${date.getFullYear()}-${months[month-1]<10?'0'+months[month-1]:months[month-1]}-${day<10?'0'+day:day}`
			} else {
				list.value[ind]['reply'] = timereply.value
				if (convertToTimestamp(list.value[ind]['reply']) > Date.now()) {
					list.value[ind]['reply'] = ''
					uni.showToast({
						title: '请选择正确时间',
						icon: 'none'
					})
					return
				}
			}
		} else {
			if (!selecreply.value) {
				list.value[ind]['reply'] = arr.value[0]
			} else {
				list.value[ind]['reply'] = selecreply.value
			}
		}
		show.value = false
	}
	async function inittimu(id) {
		if (typestr1.value == '最新问卷') {
			const res1 = await $api.surveyQuestionList({
				id
			})
			if (res1.code == 1) {
				for (var i in res1.data.question) {
					res1.data.question[i]['reply'] = ''
					if (res1.data.question[i]['question_type'] == 'checkbox') {
						res1.data.question[i]['replys'] = []
					}
				}
				console.log(list.value, 'list.valuelist.valuelist.value----------');
				list.value = res1.data.question
				survey_id.value = res1.data.survey_id
				console.log(survey_id.value, 'list.valuelist.valuelist.value----------');
			}
			return
		}
		const res = await $api.surveyquestion({
			id
		})
		if (res.code == 1) {
			for (var i in res.data) {
				res.data[i]['reply'] = ''
				if (res.data[i]['question_type'] == 'checkbox') {
					res.data[i]['replys'] = []
				}
			}
			list.value = res.data
		}
	}

	function sliderChange(e, item) {
		console.log('value 发生变化：' + e.detail.value)
		item.reply = e.detail.value
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.ttbt {
		margin-left: 32rpx;
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 50rpx;
		color: #FFFFFF;
		margin-top: 82rpx;
		width: 490rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
	}

	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.xuanxiang {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		overflow: hidden;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.tt {
			font-size: 32rpx;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}

	.wenjuan {
		width: 100%;
		overflow: hidden;
		position: relative;

		.wenjuanback {
			width: 100%;
			height: 470rpx;
			position: absolute;
			z-index: -1;
		}

		.fixedbox {
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0%;
			z-index: 999;

			.btn {
				width: 686rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-weight: 500;
				margin: auto;
				font-size: 32rpx;
				margin-top: 22rpx;
				margin-bottom: 80rpx;
				color: #FFFFFF;
			}
		}

		.bottombox {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(150, 148, 146, 0.32);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			overflow: hidden;

			.cebnter {
				width: 686rpx;
				margin: auto;
				margin-top: 32rpx;

				.xuanzeti {
					width: 100%;
					overflow: hidden;

					.timu {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;

					}

					.xuanxiangboxs {
						width: 100%;
						background: #F7F8FA;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						overflow: hidden;
						margin-top: 24rpx;

						.cnter .line:last-child {
							border: none;
						}

						.cnter {
							width: 630rpx;
							margin: auto;

							.line {
								width: 100%;
								display: flex;
								height: 80rpx;
								align-items: center;
								border-bottom: 2rpx solid #E5E6EB;

								.rightarrow {
									width: 24rpx;
									height: 24rpx;
								}

								.reduce1 {
									width: 36rpx;
									height: 36rpx;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									border: 2rpx solid #2AB4F5;
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;

									.cc {
										background: #2AB4F5;
										border-radius: 50%;
										width: 20rpx;
										height: 20rpx;
									}
								}

								.reduce {
									width: 36rpx;
									height: 36rpx;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									border: 2rpx solid #C9CDD4;
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;

									.cc {
										background: #2AB4F5;
										border-radius: 50%;
										width: 20rpx;
										height: 20rpx;
									}
								}

								.xxbox {
									width: 574rpx;
									margin-left: 18rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #1D2129;
								}
							}
						}
					}
				}
			}
		}
	}
</style>